import { v4 as uuidv4 } from "uuid";
import { Module } from "vuex";
import { GlobalDataProps } from "./index";
import { TextComponentProps } from "@/defaultProps";

export interface EditorProps {
  // 供中间编辑器渲染的数组
  components: ComponentData[];
  // 当前编辑的是那个元素：uuid
  currentElement: string;
}

export interface ComponentData {
  // 这个元素的属性，属性详情见下面
  props: { [key: string]: any };
  // id，uuid v4生成
  id: string;
  // 业务库组件名称 l-text, l-image 等等
  name: string;
}

export const testComponents: ComponentData[] = [
  { id: uuidv4(), name: "l-text", props: { text: "hello2", fontSize: "10px", color: "#000000", fontWeight: "bold", lineHeight: "2", textAlign: "left", fontFamily: "" } },
  {
    id: uuidv4(),
    name: "l-text",
    props: { text: "hello3", fontSize: "15px", actionType: "url", url: "https://www.baidu.com", lineHeight: "3", textAlign: "left", fontFamily: "" },
  },
  { id: uuidv4(), name: "l-image", props: { src: "http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg", width: "100px" } },
];

const editor: Module<EditorProps, GlobalDataProps> = {
  state: {
    components: testComponents,
    currentElement: "",
  },
  mutations: {
    addComponent(state, component: ComponentData) {
      state.components.push(component);
    },
    setActive(state, currentId: string) {
      state.currentElement = currentId;
    },
    updateComponent(state, { key, value }) {
      const updateComponent = state.components.find((c) => c.id === state.currentElement);
      if (updateComponent) {
        updateComponent.props[key as keyof TextComponentProps] = value;
      }
    },
  },
  getters: {
    getCurrentElement: (state) => {
      return state.components.find((c) => c.id === state.currentElement);
    },
  },
};

export default editor;
